<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	手风琴特效</title>
	<style>	
*{
    padding: 0;
    margin: 0;


}
ul{
	    list-style: none;
}

body{background: #ccc;}

li{
	position: relative;
float: left;
    width: 160px;
        
}
#shou_feng_qin{
	    width: 805px;
    height: 320px;
    overflow: hidden;

}
.img_title{

    position: absolute;
    bottom: 0;
    left: 0;
    width: 640px;
}

.img_title>a{
	color: #fff;
	    font-size: 16px;
    display: block;
    height: 40px;
    text-decoration: none;
    padding-left: 20px;
    line-height: 40px;
    background: rgba(0,0,0,0.5);
}
ul>li:hover{
	width: 160px;
	
}
ul:hover>li{
	width: 640px;
}

	</style>
</head>
<body>
   <div id="shou_feng_qin">	

   <ul>
   	<li><div class="img_title"><a href="#">功夫熊猫</a></div><a href="#"><img src="1.jpg" alt=""></a></li>
   	<li><div class="img_title"><a href="#">功夫熊猫</a></div><a href="#"><img src="2.jpg" alt=""></a></li>
   	<li><div class="img_title"><a href="#">功夫熊猫</a></div><a href="#"><img src="3.jpg" alt=""></a></li>
   	<li><div class="img_title"><a href="#">功夫熊猫</a></div><a href="#"><img src="4.jpg" alt=""></a></li>
   	<li><div class="img_title"><a href="#">功夫熊猫</a></div><a href="#"><img src="5.jpg" alt=""></a></li>
   </ul>

   </div>
</body>
</html>